<template>
		<view class="scene" :style="{color:colortext,fontSize:fontSize}" @touchstart.stop.prevent="touchstartscene" @touchend.stop.prevent="touchendscene" @touchmove.stop.prevent="touchmovescene">
			<view class="box" :style="oDiv">
				<view class="ring">
					<view class="ringtext" @touchend="gettext(item)" :style="{transform:item.style}" v-for="(item,index) in liviews" :key="index">{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			automaticRotate: {
				type: Number,
				default:10 //自动滚动速度，越高滚动越慢,0不滚动，设置负数，则反方向滚动
			},
			manualRotate:{
				type: Number,
				default:5 //手动滑动滚动速度，越高滑动越慢,0不滚动，设置负数，则反方向滚动
			},
			text:{
				type: String,
				default:"麻婆豆腐辣子鸡丁东坡肘子豆瓣鲫鱼口袋豆腐酸菜鱼夫妻肺片蚂蚁上树叫花鸡鱼香肉丝咸菜焖猪肉酿茄子酿豆腐梅菜扣肉客家盐焗鸡广式烧填鸭烧鹅红槽排骨豆豉蒸排骨煎酿三宝西湖醋鱼东坡肉荷叶粉蒸肉西湖莼菜汤龙井虾仁虎跑素火腿香酥焖肉虾爆鳝背油焖春笋玉带虾仁油发豆莛红扒鱼翅白扒通天翅孔府一品锅花揽桂鱼纸包鸡焖大虾锅烧鸡山东菜丸佛跳墙醉排骨荔枝肉扳指干贝尤溪卜鸭七星鱼丸汤软溜珠廉鱼龙身凤尾虾油爆双脆清炖全鸡烤方金陵丸子白汁圆菜清炖蟹粉狮子头水晶肴蹄鸡汤煮干丝凤尾虾三套鸭无锡肉骨头陆稿荐酱猪头肉海参盆蒸腊味合蒸走油豆豉扣肉麻辣子鸡冰糖湘莲臭豆腐红烧寒菌炒血鸭湘西酸肉" //默认文字，长度不低于42
			},
			radius:{
				type: Number,
				default:250 //球的半径大小
			},
			colortext:{
				type: String,
				default:'#16E5FF' //字体颜色
			},
			fontSize:{
				type: String,
				default:'30rpx' //字体大小
			},
			canTouch:{
				type:Boolean,
				default:true
			}
		},
		data() {
			return {
				liview:[],
				liviews:[],
				oDiv:{},
				iTimer:"",
				clickX:"",
				clickY:"",
				disX:0,
				disY:0,
				angleX:0,
				angleY:0
			}
		},
		methods: {
			setCss3(obj,attrObj,that) {
			   for (var i in attrObj) {
			 	  obj.style= attrObj[i]
				  that.liviews.push(obj)
			   }
			},
			gettext(item){
				// console.log(item)
			},
			touchstartscene(ev){
				if(!this.canTouch){return}
				clearInterval(this.iTimer);
				var e = ev || event;
				 this.clickX = e.touches[0].clientX;
				this.clickY = e.touches[0].clientY;
				this.disY = 0
				this.disX = 0
			},
			touchendscene(){
				if(!this.canTouch){return}
				this.angleX = this.angleX-this.disY;
				this.angleY = this.angleY+this.disX;
				if(this.disY==0 && this.disX==0){
					this.disX = -50;
				}
				this.iTimer = setInterval(()=>{
					this.angleX -= this.disY/100;
					this.angleY += this.disX/100;
					this.oDiv = "transform: rotateX("+ this.angleX +"deg) rotateY("+ this.angleY +"deg)" 
				},60);
			},
			touchmovescene(ev){
				if(!this.canTouch){return}
				var e = ev || event;
				this.disX = (e.touches[0].clientX - this.clickX)/this.manualRotate
				this.disY = (e.touches[0].clientY - this.clickY)/this.manualRotate
				this.oDiv = "transform: rotateX("+ (this.angleX-this.disY) +"deg) rotateY("+ (this.angleY+this.disX) +"deg)"
			},
		},
		created() {
		     var r = this.radius
		     var circleArr = [];
		     var coneArr = [];
		     var coneNum = 0;
		     var wordNum = -1;
		     var liNub = 0;
		     var theta = 0;
		     var phi = 0;
		     var layer = 0;
		     var num = 0;
		     var iTimer2 = 0;
		     var columnH = 0;
		     var columnNum = 0;
		 	  
		         for(var i=4; i<13; i++){
		             num = i*i + (i+1)*(i+1);
		             if(num >= this.text.length){
		                 layer = (i-1)*2+1;
		                 break;
		 
		             }
		             layer = (i-1)*2+1;
		 
		         }
		 
		         for(var i=0; i<layer; i++){
		 
		             if(i<(layer+1)/2){
		 
		                 wordNum+=2;
		 
		             }else{
		 
		                 wordNum-=2;
		 
		             }
		             circleArr.push(wordNum);
		 
		         }
		 
		 
		         num = 0;
		         for(var i=0; i<circleArr.length; i++){
		 
		             theta = Math.PI/circleArr.length;
		             phi = 2*Math.PI/circleArr[i];
		             for(var j=0; j<circleArr[i]; j++){
						 var li = {}
						 li.text = this.text[num]
		                 num++;
		                 drawCircle(li,theta,phi,i,j);
						this.liview.push(li)
		             }
		 
		         }
		  
		 
		         for(var i=0; i<this.liview.length; i++){
		 
		             coneNum += 2*i+1;
		             if(coneNum>this.liview.length){
		 
		                 coneNum -= 2*i+1;
		                 break;
		 
		             }
		             coneArr.push(2*i+1);
		         }
		 
		         for(var i=0; i<coneArr.length; i++){
		 
		             phi = 2*Math.PI/coneArr[i];
		             for(var j=0; j<coneArr[i]; j++){
		 
		                 drawCone(this.liview[liNub],phi,i,j);
		                 liNub++;
		 
		             }
		
		         }
		 
		         liNub = 0;
		         columnH = Math.floor(this.liview.length/(circleArr.length-2));
		         columnNum = columnH*(circleArr.length-2);
		         for(var i=0; i<circleArr.length-1; i++){
		 
		             phi = 2*Math.PI/columnH;
		             for(var j=0; j<columnH; j++){
		 
		                 drawColumn(this.liview[liNub],phi,i,j);
		                 drawColumn2(this.liview[liNub],phi,i,j);
		                 liNub++;
		 
		             }
		 
		         }
				  
		         for(var i=0; i<this.liview.length; i++){
		             this.setCss3(this.liview[i],{transform:'translate3D('+ this.liview[i].circleX +'rpx,'+ this.liview[i].circleY +'rpx,'+ this.liview[i].circleZ +'rpx) rotateY('+ this.liview[i].circlePhi +'rad) rotateX('+ (this.liview[i].circleTheta-Math.PI/2) +'rad)'},this);
		         }
		 
		    
		 
			 function drawCircle(obj,theta,phi,i,j){
		         obj.circleX = r*Math.sin(theta*i)*Math.sin(phi*j) + r;
		         obj.circleY = -r*Math.cos(theta*i) + r;
		         obj.circleZ = r*Math.sin(theta*i)*Math.cos(phi*j);
		         obj.circleTheta = theta*(circleArr.length-i);
		         obj.circlePhi = phi*j;
		         obj.bigCircleX = (r+2000)*Math.sin(theta*i)*Math.sin(phi*j) + r;
		         obj.bigCircleY = -(r+2000)*Math.cos(theta*i) + r;
		         obj.bigCircleZ = (r+2000)*Math.sin(theta*i)*Math.cos(phi*j);
		         obj.maxX = obj.bigCircleX;
		         obj.maxY = obj.bigCircleY;
		         obj.maxZ = obj.bigCircleZ;
		         obj.maxTheta = obj.circleTheta;
		         obj.maxPhi = obj.circlePhi;
		 
		     }
		     function drawColumn(obj,phi,i,j){
		 
		         obj.columnX = r/1.5*Math.sin(phi*j) + r;
		         obj.columnY = (2*r/(circleArr.length-2))*i + 50;
		         obj.columnZ = (r/1.5*Math.cos(phi*j)).toFixed(2);
		         obj.columnPhi = phi*j;
		         obj.bigColumnX = (r+2000)/1.5*Math.sin(phi*j) + r;
		         obj.bigColumnY = (2*(r+2000)/(circleArr.length-2))*i + 50-2000;
		         obj.bigColumnZ = ((r+2000)/1.5*Math.cos(phi*j)).toFixed(2);
		 
		     }
		     function drawColumn2(obj,phi,i,j){
		         obj.column2X = r/1.5*Math.sin(phi*j+i*Math.PI/180*8) + r;
		         obj.column2Y = (2*r/(circleArr.length-2))*i + 50;
		         obj.column2Z = (r/1.5*Math.cos(phi*j+i*Math.PI/180*8)).toFixed(2);
		         obj.column2Phi = phi*j+i*Math.PI/180*8;
		         obj.bigColumn2X = (r+2000)/1.5*Math.sin(phi*j+i*Math.PI/180*8) + r;
		         obj.bigColumn2Y = (2*(r+2000)/(circleArr.length-2))*i + 50-2000;
		         obj.bigColumn2Z = ((r+2000)/1.5*Math.cos(phi*j+i*Math.PI/180*8)).toFixed(2);
		 
		     }
		     function drawCone(obj,phi,i,j){
		 
		         obj.coneX = (2*r/coneArr.length)*i*Math.tan(30*Math.PI/180)*Math.sin(phi*j) + r;
		         obj.coneY = (2*r/coneArr.length)*i + 50;
		         obj.coneZ = (2*r/coneArr.length)*i*Math.tan(30*Math.PI/180)*Math.cos(phi*j);
		         obj.coneTheta = Math.PI/6;
		         obj.conePhi = phi*j;
		         obj.bigConeX = (2*(r+2000)/coneArr.length)*i*Math.tan(30*Math.PI/180)*Math.sin(phi*j) + r;
		         obj.bigConeY = (2*(r+2000)/coneArr.length)*i + 50-2000;
		         obj.bigConeZ = (2*(r+2000)/coneArr.length)*i*Math.tan(30*Math.PI/180)*Math.cos(phi*j);
		 
		     }
			var my = 0
			var mx = 0
		     this.iTimer = setInterval(()=>{
				 my -= 3
				 this.angleY = my/this.automaticRotate
		         this.angleX = mx/this.automaticRotate
				this.oDiv = "transform: rotateX("+ this.angleX +"deg) rotateY("+ this.angleY +"deg)"
		     },60);
		}
	}
</script>

<style>

.scene {
	width: 500rpx;
	height: 500rpx;
	margin: 200rpx auto;
	perspective: 900px;
	-webkit-perspective: 900px;
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

.box {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	perspective-origin: center 250px;
}

.ring {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	position: absolute;
}

.ringtext {
	line-height: 30px;
	text-align: center;
	
	position: absolute;
	margin-top: -25px;
	margin-left: -15px;
	transition: all .6s;
}

.ringtext.all {
	transition: all .6s cubic-bezier(.75,.25,1,1);
}

.ringtext.one {
	transition: transform .6s cubic-bezier(0,0,.25,.75);
}

 
</style>
